<template>
  <div>
    <!-- 基础信息表单 -->
    <div>
      <t-form ref="systemFormData" :data="formVal" :rules="rulesForm">
        <t-row>
          <template v-for="(item, index) in formLabel">
            <!-- 一级属性 -->
            <template v-if="!item.group && canshow(item)">
              <t-col :span="item.col ? item.col : 12" :key="`first${index}`" v-if="canshow(item)">
                <t-form-item
                  :label="item.label ? `${item.label}` : ''"
                  :label-width="item.labelWidth ? item.labelWidth : '50%'"
                  :name="item.rules ? item.field : ''"
                  :class="item.class ? item.class : ''"
                >
                  <!-- input 输入框 -->
                  <template v-if="item.type == 'input'">
                    <slot
                     :name="item.field"
                      :item="item" :itemValue="formVal[item.field]"
                 
                      >
                      <template v-if="editType">
                        <t-input
                          v-model="formVal[item.field]"
                          :placeholder="item.placeholder ? item.placeholder : '请输入'"
                          />
                      </template>
                      <template v-else>
                        <div  >
                          {{ formVal[item.field] ? formVal[item.field] : '/' }}
                        </div>
                      </template>
                    </slot>
                  </template>
                  <!-- number 数字输入框 -->
                  <template v-else-if="item.type == 'number'">
                    <slot :name="item.field" :item="item" :itemValue="formVal[item.field]">
                      <template v-if="editType">
                        <t-input-number
                          v-model="formVal[item.field]"
                          theme="normal"
                          :placeholder="item.placeholder ? item.placeholder : '请输入'"
                          :decimal-places="item.decimalPlaces ? item.decimalPlaces : 0"
                        ></t-input-number>
                      </template>
                      <template v-else>
                        <div>
                          {{ formVal[item.field] ? formVal[item.field] : '/' }}
                        </div>
                      </template>
                    </slot>
                  </template>
                  <!-- select 下拉框 -->
                  <template v-else-if="item.type == 'select'">
                    <slot :name="item.field" :item="item" :itemValue="formVal[item.field]">
                      <template v-if="editType">
                        <t-select v-model="formVal[item.field]" placeholder="请选择">
                          <t-option
                            v-for="optionItem in option[item.option]"
                            :key="optionItem.label"
                            :value="optionItem.value"
                            :label="optionItem.label"
                            >{{ optionItem.label }}</t-option
                          >
                        </t-select>
                      </template>
                      <template v-else>
                        <div>
                          {{ filter(formVal[item.field], option[item.option]) }}
                        </div>
                      </template>
                    </slot>
                  </template>
                  <!-- date 日期选择器 -->
                  <template v-else-if="item.type == 'date'">
                    <slot :name="item.field" :item="item" :itemValue="formVal[item.field]">
                      <template v-if="editType">
                        <t-date-picker v-model="formVal[item.field]"></t-date-picker>
                      </template>
                      <template v-else>
                        <div>
                          {{ formVal[item.field] ? formVal[item.field] : '/' }}
                        </div>
                      </template>
                    </slot>
                  </template>
                  <!-- dateRange 多日期选择器 -->
                  <template v-else-if="item.type == 'dateRange'">
                    <slot :name="item.field" :item="item" :itemValue="formVal[item.field]">
                      <template v-if="editType">
                        <t-date-range-picker v-model="formVal[item.field]"></t-date-range-picker>
                      </template>
                      <template v-else>
                        <div>
                          {{ formVal[item.field] ? formVal[item.field] : '/' }}
                        </div>
                      </template>
                    </slot>
                  </template>
                  <!-- occupation 占位符 -->
                  <template v-else-if="item.type == 'occupation'" >
                    <slot
                     :name="item.field" 
                     :item="item" 
                     :itemValue="formVal[item.field]"
                     :class="item.class?item.class:''"
                     > </slot>
                  </template>
                  <!-- 自定义插槽 -->
                  <template v-else>
                    <slot 
                    :name="item.field"
                     :item="item" 
                     :itemValue="formVal[item.field]"
                     :class="item.class?item.class:''"
                     ></slot>
                  </template>
                </t-form-item>
              </t-col>
            </template>
            <!-- 二级属性 -->
            <template v-else-if="item.group && canshow(item)">
              <template v-for="(childItem, childIndex) in item.childList">
                <t-col
                  :span="childItem.col ? childItem.col : 12"
                  :key="`${item.field}${childIndex}`"
                  v-if="canshow(childItem, item)"
                >
                  <t-form-item
                    :label="childItem.label ? childItem.label : ''"
                    :label-width="childItem.labelWidth ? childItem.labelWidth : '50%'"
                    :name="childItem.rules ? childItem.field : ''"
                    :class="childItem.class ? childItem.class : ''"
                  >
                    <!-- input 输入框 -->
                    <template v-if="childItem.type == 'input'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                        <template v-if="editType">
                          <t-input
                            v-model="formVal[item.field][childItem.field]"
                            :placeholder="childItem.placeholder ? childItem.placeholder : '请输入'"
                          />
                        </template>
                        <template v-else>
                          <div>
                            {{ formVal[item.field][childItem.field] ? formVal[item.field][childItem.field] : '/' }}
                          </div>
                        </template>
                      </slot>
                    </template>
                    <!-- number 数字输入框 -->
                    <template v-else-if="childItem.type == 'number'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="item"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                        <template v-if="editType">
                          <t-input-number
                            v-model="formVal[item.field][childItem.field]"
                            theme="normal"
                            :placeholder="childItem.placeholder ? childItem.placeholder : '请输入'"
                            :decimal-places="childItem.decimalPlaces ? childItem.decimalPlaces : 0"
                          ></t-input-number>
                        </template>
                        <template v-else>
                          <div>
                            {{ formVal[item.field][childItem.field] ? formVal[item.field][childItem.field] : '/' }}
                          </div>
                        </template>
                      </slot>
                    </template>
                    <!-- select 下拉框 -->
                    <template v-else-if="childItem.type == 'select'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                        <template v-if="editType">
                          <t-select v-model="formVal[item.field][childItem.field]" placeholder="请选择">
                            <t-option
                              v-for="optionItem in option[childItem.option]"
                              :key="optionItem.label"
                              :value="optionItem.value"
                              :label="optionItem.label"
                              >{{ optionItem.label }}</t-option
                            >
                          </t-select>
                        </template>
                        <template v-else>
                          <div>
                            {{ filter(formVal[item.field][childItem.field], option[childItem.option]) }}
                          </div>
                        </template>
                      </slot>
                    </template>
                    <!-- date 日期选择器 -->
                    <template v-else-if="childItem.type == 'date'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                        <template v-if="editType">
                          <t-date-picker v-model="formVal[item.field][childItem.field]"></t-date-picker>
                        </template>
                        <template v-else>
                          <div>
                            {{ formVal[item.field][childItem.field] ? formVal[item.field][childItem.field] : '/' }}
                          </div>
                        </template>
                      </slot>
                    </template>
                    <!-- dateRange 多日期选择器 -->
                    <template v-else-if="childItem.type == 'dateRange'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                        <template v-if="editType">
                          <t-date-range-picker v-model="formVal[item.field][childItem.field]"></t-date-range-picker>
                        </template>
                        <template v-else>
                          <div>
                            {{ formVal[item.field][childItem.field] ? formVal[item.field][childItem.field] : '/' }}
                          </div>
                        </template>
                      </slot>
                    </template>
                    <!-- occupation 占位符 -->
                    <template v-else-if="childItem.type == 'occupation'">
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      >
                      </slot>
                    </template>
                    <!-- 自定义插槽 -->
                    <template v-else>
                      <slot
                        :name="`${item.field}_${childItem.field}`"
                        :item="childItem"
                        :itemValue="formVal[item.field][childItem.field]"
                      ></slot>
                    </template>
                  </t-form-item>
                </t-col>
              </template>
            </template>
          </template>
        </t-row>
      </t-form>
    </div>
  </div>
</template>

<script>
//import { rulesList, validateList } from '/public/Js/rules.js';
export default {
  props: {
    // 表头
    formLabel: {
      type: Array,
    },
    // 表单数据
    propFormVal: {
      type: Object,
    },
    // 枚举值
    option: {
      type: Object,
    },
    // 状态(能否编辑)
    editType: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          color: '#ff5a5f',
          width: 2,
          radius: '2px',
        },
      },
      aa: 1,
      // 表单数据
      formVal: this.propFormVal,
      // 校验规则
      rulesForm: {},
    };
  },
  methods: {
    // 执行表单校验
    validateForm() {
      return new Promise((cantch) => {
        this.$refs.systemFormData.validate((valid) => {
          if (valid) {
            return true;
          } else {
            return false;
          }
        });
      });
    },
  },
  computed: {
    /**
     * 枚举值转文字
     * */
    filter() {
      return (val, arr) => {
        let labelName = '/';
        arr.forEach((v) => {
          if (v.value == val) {
            labelName = v.label;
          }
        });
        return labelName;
      };
    },
    // /**
    //  * 控制显示隐藏
    //  * item:对应每条数据
    //  */

    canshow() {
      return (item, fatherItem) => {
        if (item.canShow) {
          let labelShow = false;
          for (let i in item.canShow) {
            if (i == 'childSelf') {
              // 对二级对象自身的显示处理
              for (let chiI in item.canShow.childSelf) {
                if (Array.isArray(item.canShow.childSelf[chiI])) {
                  item.canShow.childSelf[chiI].forEach((v) => {
                    if (
                      this.formVal[fatherItem.field][chiI] !== null &&
                      this.formVal[fatherItem.field][chiI] !== undefined &&
                      this.formVal[fatherItem.field][chiI] == v
                    ) {
                      labelShow = true;
                    }
                  });
                  return labelShow;
                } else {
                  if (
                    this.formVal[fatherItem.field][chiI] !== null &&
                    this.formVal[fatherItem.field][chiI] !== undefined &&
                    this.formVal[fatherItem.field][chiI] == item.canShow.childSelf[chiI]
                  ) {
                    return true;
                  }
                  return false;
                }
              }
            } else if (Array.isArray(item.canShow[i])) {
              item.canShow[i].forEach((v) => {
                if (this.formVal[i] !== null && this.formVal[i] !== undefined && this.formVal[i] == v) {
                  labelShow = true;
                }
              });
              return labelShow;
            } else {
              if (this.formVal[i] !== null && this.formVal[i] !== undefined && this.formVal[i] == item.canShow[i]) {
                return true;
              }
              return false;
            }
          }
        } else {
          return true;
        }
      };
    },
  },
  created() {},
};
</script>
<style lang="less">
.avatar-uploade {
  width: 120px;
  height: 120px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep .noBorder {
  .el-input__inner {
    border: 1px solid transparent;
  }
}
</style>
